<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取表单的值</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div>
        <form action="" method="get">
            <br>手机号: <input type="text" name="mobile" id="mobile" autocomplete="off"><br> 密码: <input type="password" name="authText" id="authText" autocomplete="off"><br>
            <br>性别:
            <select name="gender" id="gender">
                <option value="0">拔蒜小妹</option>
                <option value="1" selected>精神小伙</option>
            </select>
            <br>爱好:
            <select name="hobby" id="hobby" multiple>
                <option value="swimming">游泳</option>
                <option value="running" selected>跑步</option>
                <option value="skiing" selected>滑雪</option>
            </select>

        </form>
        <button id="submit">提交</button>
    </div>
</body>

</html>
<script>
    // 获取按钮元素
    let btn = window.document.querySelector('#submit');
    // 按钮元素触发单击事件
    btn.onclick = function(param) {
        getValues();
    };
    // 按钮单击后获取表单的值radio
    function getValues() {
        // window.alert('OK');
        // 获取表单元素
        let mobile = window.document.querySelector('#mobile');
        let authText = window.document.querySelector('#authText');
        // let genders = window.document.getElementsByName('radio');
        let genders = window.document.querySelector('#gender');
        let hobbys = window.document.querySelector('#hobby');
        // 使用表单元素对象获取其属性值
        let mobileValue = mobile.value;
        let authTextValue = authText.value;
        window.console.log('手机号--->' + mobileValue);
        window.console.log('密码--->' + authTextValue);
        for (let index = 0; index < genders.length; index++) {
            const element = genders[index];
            if (element.selected) {
                window.console.log('性别--->' + (genders.value == 1) ? '精神小伙儿' : '扒蒜老妹儿');
                break;
            }
        }
        for (let index = 0; index < hobbys.length; index++) {
            const element = hobbys[index];
            if (element.selected) {
                window.console.log('爱好--->' + element.value);
            }
        }
    }
</script>